<div style="font-weight: bold; font-size: 20px; margin-top: 20px"> ${serialNumber}、各区域用户变化情况</div>
<div style="width: 1000px;margin: 16px auto;overflow: hidden;">
    <select id="areaId" style="float: right;padding: 5px;min-width: 100px;"></select>
</div>
<div id="table5-desc-1" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    <!-- 本周累计用户数为x人，其中常住用户数为x人，流动用户数为x人，特定用户数为x人，外省用户数为x人，境外用户数为x人，占比如下图所示。-->
</div>
<div id="myecharts5-1" style="width: 600px; height: 340px; margin: 0 auto; margin-top: 20px"></div>
<div id="table5-desc-2" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    <!-- 下周所示为本周在线用户变化情况，如图所示，本周每日累计在线用户数量峰值出现在x月x日,累计在线用户数量为x人。-->
</div>
<div id="myecharts5-2" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>

<script>
    (function () {

        $("#areaId").change(function (){
            change()
        })

        var currentUserKeyMap = {
            "mobileUsers": "流动用户数",
            "otherProvincesUsers": "外省用户数",
            "overseasUsers": "境外用户数",
            "permanentUsers": "常住用户数",
            "specificUsers": "特定用户数"
        }
        var focusAreaResponseList = ${focusAreaResponseList}
        var result1 = {
            "三沙市": {
                total: 55,
                data: [
                    { area: "常住用户数", count: 666666 },
                    { area: "流动用户数", count: 111565 },
                    { area: "特定用户数", count: 5544 },
                    { area: "外省用户数", count: 521 },
                    { area: "境外用户数", count: 9941 }
                ],
                des: { v1: 4,v2: 4, }
            },
            "昌江黎族自治县": {
                total: 8888,
                data: [
                    { area: "常住用户数", count: 558 },
                    { area: "流动用户数", count: 11666 },
                    { area: "特定用户数", count: 5544 },
                    { area: "外省用户数", count: 5211 },
                    { area: "境外用户数", count: 994 }
                ],
                des: { v1: 22,v2: 4, }
            }
        };
        var result2 = {
            "三沙市": {
                data: [
                    { date: "05-22", count: 3632 },
                    { date: "05-23", count: 5 },
                    { date: "05-24", count: 5544 },
                    { date: "05-25", count: 521 },
                    { date: "05-26", count: 9941 },
                    { date: "05-27", count: 666 },
                    { date: "05-28", count: 11245 },
                ],
                des: { v1: 11,v2: 4, }
            },
            "昌江黎族自治县":{
                data: [
                    { date: "05-22", count: 32 },
                    { date: "05-23", count: 45 },
                    { date: "05-24", count: 544 },
                    { date: "05-25", count: 21 },
                    { date: "05-26", count: 941 },
                    { date: "05-27", count: 666 },
                    { date: "05-28", count: 11245 },
                ],
                des: { v1: 23,v2: 4, }
            }
        };
        $(document).ready(function () {
            // 五、各区域用户变化情况
            var resultKey = [], resultData1 = [], resultData2 = [], total=0, desObj1 = {}, desObj2 = {}
            /*$.each(result1,function(key, item) {
                resultKey.push(key);
                var option="<option value="+key+">"+key+"</option>";
                $("#areaId").append(option)
            });*/
            $.each(focusAreaResponseList,function(index, item) {
                resultKey.push(item.areaName);
                $("#areaId").append("<option value="+item.areaName+">"+item.areaName+"</option>")
            });
            // 取第一个的值
            /*resultData1 = resultKey.length>0? result1[resultKey[0]].data: [];
            resultData2 = resultKey.length>0? result2[resultKey[0]].data: [];
            desObj1 = resultKey.length>0? result1[resultKey[0]].des: {};
            desObj2 = resultKey.length>0? result2[resultKey[0]].des: {};
            total = resultKey.length>0? result1[resultKey[0]].total: 0;*/
            // 图一
            // initEcharts1(resultData1, desObj1, total);
            initEcharts1(focusAreaResponseList[0]);
            // 图二
            // initEcharts2(resultData2, desObj2)
            initEcharts2(focusAreaResponseList[0])
        });
        // 各区域用户变化情况图一
        function initEcharts1(datas) {
            $("#table5-desc-1").text(datas.descP1);
            var myecharts5_1 = echarts.init(document.getElementById("myecharts5-1"));
            var source = $.map(datas["currentUser"], function(v, k){
                if (k !== 'keyUsers' && k !== 'createTime' && k !== 'totalUsers') {
                    return {
                        product: currentUserKeyMap[k],
                        count: v,
                    }
                }
            });
            var hollowCenterText = '本周总数\n\n'+(datas["currentUser"]["totalUsers"]?datas["currentUser"]["totalUsers"]:0);
            var optionPie = {
                tooltip: {
                    show: true,
                    trigger: 'item',
                    formatter: '{b}: {d}%'
                },
                color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
                legend: {
                    show: true,
                    orient: 'vertical', // horizontal水平 vertical垂直
                    padding: [0, 0],
                    icon: 'circle',
                    right: 10,
                    top: 'middle',
                    formatter: function(name) {
                        for (var i = 0, l = source.length; i < l; i++) {
                            if (source[i].product == name) {
                                var count = source[i].count?source[i].count + '   ': '0'
                                return name + '   ' + count
                            }
                        }
                    },
                },
                series: [
                    {
                        type: 'pie',
                        startAngle: 160,
                        center: ['40%', '50%'],
                        radius: ['55%', '70%'],
                        avoidLabelOverlap: true,
                        minAngle: 0,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'center',
                                color:'#3c3c3c',
                                fontWeight: 'normal',
                                fontStyle: 'normal' ,
                                formatter: (params)=> {
                                    return hollowCenterText
                                },
                                fontSize: 20,
                                textStyle: {
                                    rich: {
                                        a: {
                                            color: '#656565'
                                        },
                                        b: {
                                            color: '#6885F2'
                                        },
                                        c: {
                                            color: '#656565'
                                        }
                                    }
                                },
                                distanceToLabelLine: 0,
                                padding: [-2, 0, 0, 0]
                            },
                        },
                        labelLine: {
                            normal: {
                                show: true,
                                length: 10,
                                length2: 20
                            }
                        }
                    }
                ],
                dataset: {
                    source: source
                }
            }
            myecharts5_1.setOption(optionPie);
        }
        // 各区域用户变化情况图二
        function initEcharts2(datas) {
            $("#table5-desc-2").text(datas.descP2);
            var myecharts5_2 = echarts.init(document.getElementById("myecharts5-2"));
            var lineYAxisData = $.map(datas["areaUserUp"]["sevenDaysList"], function(n, i){ return n.period  });
            var lineValues = $.map(datas["areaUserUp"]["sevenDaysList"], function(n, i){ return n.count });
            var optionLine = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                    },
                    formatter: obj => {
                        return obj[0].name + '<br><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#5470c6;"></span>'
                            + obj[0].value + '人'
                    }
                },
                color: ['#4b91ff'],
                legend: false,
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "5%",
                    containLabel: false,
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: lineYAxisData,
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        type: "line",
                        data: lineValues,
                        smooth: true,
                        areaStyle: {opacity: 0.2}
                    }
                ]
            }
            myecharts5_2.setOption(optionLine);
        }
        function change() {
            initEcharts1(focusAreaResponseList[areaId.selectedIndex]);
            initEcharts2(focusAreaResponseList[areaId.selectedIndex]);
        }
    })()
</script>